<template>
  <el-dialog
    :visible.sync="dialogVisible"
    :close-on-click-modal="false"
    title="修改密码"
    width="500px"
    top="20vh"
    center
    append-to-body
    @close="hide"
  >
    <el-form ref="form" :model="form" :rules="rules" label-width="100px">
      <el-form-item label="原密码" prop="password">
        <el-input
          v-model.trim="form.password"
          type="password"
          placeholder="请输入原密码"
          :maxlength="20"
          show-password
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item label="新密码" prop="newPassword">
        <el-input
          v-model.trim="form.newPassword"
          placeholder="请输入新密码"
          :maxlength="20"
          show-password
          type="password"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item label="重复新密码" prop="newPasswordConfirm">
        <el-input
          v-model.trim="form.newPasswordConfirm"
          placeholder="请重复输入新密码"
          :maxlength="20"
          show-password
          type="password"
          autocomplete="off"
        ></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" :loading="loading" @click="handleModifyPassword">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { mapGetters } from 'vuex';
import { modifyPassword } from '@/api/cosweb';
import { encrypt } from '@/utils/jsencrypt';

const isPassword = (value) => {
  return value.length >= 6;
};

export default {
  data () {
    const validatePassword = (rule, value, callback) => {
      if (!isPassword(value)) {
        callback(new Error('密码不能少于6位'));
      } else {
        callback();
      }
    };
    const validateNewPassword = (rule, value, callback) => {
      if (!isPassword(value)) {
        callback(new Error('密码不能少于6位'));
      } else {
        if (this.form.newPasswordConfirm !== '') {
          this.$refs.form.validateField('newPasswordConfirm');
        }
        callback();
      }
    };
    const validateNewPasswordConfirm = (rule, value, callback) => {
      if (!isPassword(value)) {
        callback(new Error('密码不能少于6位'));
      } else if (value !== this.form.newPassword) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };

    return {
      dialogVisible: false,
      form: {
        password: '',
        newPassword: '',
        newPasswordConfirm: ''
      },
      rules: {
        password: [
          {
            required: true,
            trigger: 'blur',
            validator: validatePassword
          }
        ],
        newPassword: [
          {
            required: true,
            trigger: 'blur',
            validator: validateNewPassword
          }
        ],
        newPasswordConfirm: [
          {
            required: true,
            trigger: 'blur',
            validator: validateNewPasswordConfirm
          }
        ]
      },
      loading: false,
      branchNo: '3115' // 营业部 - 暂时写死
    };
  },
  computed: {
    ...mapGetters({
      userInfo: 'globalUserInfo'
    })
  },
  methods: {
    show () {
      this.dialogVisible = true;
    },

    hide () {
      this.$refs.form.resetFields();
      this.dialogVisible = false;
      this.loading = false;
    },

    handleModifyPassword () {
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          try {
            this.loading = true;
            const params = {
              branchNo: this.branchNo,
              userCode: this.userInfo.USER_CODE,
              acctCode: this.userInfo.PHONE,
              acctType: '6',
              password: encrypt(this.form.password, 1),
              newPassword: encrypt(this.form.newPassword, 1)
            };
            modifyPassword(params).then(res => {
              if (res.data.success) {
                this.hide();
                this.$message.success('修改密码成功');
              } else {
                this.$message.error('修改密码失败');
              }
            });
          } finally {
            this.loading = false;
          }
        } else {
          return false;
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped></style>
